<template>
  <a-modal
    :visible="visible"
    
    centered
    :width="400"
    @cancel="onClose"
  >
    <template #title>
      <div style="font-weight: 600;">添加成员</div>
      <div style="font-size: 12px;color:#aaa;">对方打开链接，点击“确认”并登录，即可加入该团队</div>
    </template>
    <template v-if="step == 1">
      <div class="flex align-center">
        <span style="color: red; margin-right: 3px">*</span>
        <span>权限设置:</span>
        <a-radio-group
            name="radioGroup"
            v-model:value="isManager"
            style="flex: 1; margin-left: 10px"
          >
          <a-radio :value="1">管理者</a-radio>
          <a-radio :value="0">使用者</a-radio>
          </a-radio-group>
      </div>
      <div class="flex align-center mt-20">
        <span style="color: red; margin-right: 3px">*</span>
        <span>邀请人数:</span>
        <a-input-number
          id="inputNumber"
          v-model:value="inviteNumber"
          :min="1"
          style="flex: 1; margin-left: 10px"
          placeholder="请输入邀请人数"
        />
      </div>
    </template>
    <template v-if="step == 2">
      <div class="modal-content">
        <img :src="inviteQrCode" alt="" class="invite-qr-code" />
        <div style="margin-top: 20px; color: #666">
          链接有效期：{{ expire_hour }} 小时,最多可邀请{{ inviteNumber }}人
        </div>
      </div>
    </template>
    <template #footer>
      <a-button
        key="submit"
        type="primary"
        :loading="submitLoading"
        @click="onSubmit"
        v-if="step == 1"
        >确定</a-button
      >
      <a-button key="back" @click="step = 1" v-if="step == 2">上一步</a-button>
      <a-button
        key="back"
        type="primary"
        v-if="step == 2"
        @click="$utils.copyText(inviteUrl)"
        >复制邀请链接</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import {
  PlusOutlined,
  ExclamationCircleOutlined,
  CloseCircleFilled,
} from "@ant-design/icons-vue";
let loginTimer = null;
export default defineComponent({
  name: "InviteMember",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      isManager: 1,//管理员 1  使用者 0
      inviteNumber: 1,
      step: 1,
      inviteQrCode: "",
      inviteUrl: "",
      submitLoading: false,
      expire_hour: null,
    });

    const onClose = () => {
      context.emit("onClose");
      state.inviteNumber = 1;
      state.step = 1;
      state.isManager = 1;
    };

    const onSubmit = () => {
      if (!state.inviteNumber) {
        message.error("请输入邀请人数");
        return;
      }
      state.submitLoading = true;
      let params = {
        team_id: store.state.user.teamId,
          numbers: state.inviteNumber,
          power: state.isManager,
      }
      if(route.path.includes('workShotstack')){//生成shotstack项目下的邀请码
        params.source = 'shotstack'
      }
      if(route.path.includes('socialMedia')){//生成socialMedia项目下的邀请码
        params.source = 'socialMedia'
      }
      request
        .post("/work_ai", "/user/team/inviteCode", params)
        .then((res) => {
          if (res.invite_url) {
            state.inviteUrl = res.invite_url;
            state.expire_hour = res.expire_hour;
            request
              .get("/public", "/qrcode", {
                qrCode: res.invite_url,
              })
              .then((result) => {
                state.inviteQrCode = result.url;
                state.submitLoading = false;
                state.step = 2;
              });
          }
        });
    };

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .invite-qr-code {
    width: 150px;
    height: 150px;
    object-fit: cover;
  }
}
</style>
